<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customer</title>
    <style>
        body{
            width: 100%;
            background-color:transparent;
        }
        .bodystyle{
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opactiy:0.5;
        opacity:0.5;
        }
     img{
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
            text-align: center;
        }
        .leftbox{
            background-color: rgb(134, 238, 31);
            position: fixed;
            width: 9.75%;
            height: 272px;
            float: left;
            left: 2.5%;
            top: 40%;
            transform: translate(-20%, -20%);
        
        }
        .rightbox{
            background-color: brown;
            position: fixed;
            width: 10%;
            height: 300px;
            float: left;
            left: 93%;
            top: 40%;
            transform: translate(-20%, -20%);
        }
        .guide{
            width: 100%;
            position: relative;
            left: -3%;
        }
        .move{
            position: absolute;
            width: 80%;
            top:21%;
            left:20.75%;
        }
        .banner-wrap{
            width: 72%;
            overflow: hidden;
        }

        .banner-item>img{
            width: 900px;
            height: 410px;
            vertical-align: top;
        }
        .banner-item{
            width:1800px;
            animation: interval 6s ease 3s infinite ;
        }

        @keyframes interval{
            0%{
                margin-left: 0;
            }

            100%{
                margin-left: -900px;
            } 
        } 


        text {
            color: rgb(50,200,10);
        }
        .p1{
            border-radius: 8px;
            background-color: rgb(50,150,225);
            vertical-align: middle;
            text-align: center;
            width: 900px;
        }
        .p1:hover{
            transform: scale(1, 1.3);
        }
        .p2{
            border-radius: 8px;
            background-color: rgb(50,150,225);
            vertical-align: middle;
            text-align: center;
            width: 900px;
        }
        .p2:hover{
            transform: scale(1, 1.3);
        }
         .p3{
            border-radius: 8px;
            background-color: rgb(50,150,225);
            vertical-align: middle;
            text-align: center;
            width: 900px;
        }
        .p3:hover{
            transform: scale(1, 1.3);
        }
        .p4{
            border-radius: 8px;
            background-color: rgb(50,150,225);
            vertical-align: middle;
            text-align: center;
            width: 900px;
        }
        .p4:hover{
            transform: scale(1, 1.3);
        }
        .lgh{
         left: 60%;
        }
        .bottom{
        position: absolute;
            top:2%;
            left:80.75%;
        }
    </style>
</head>
<body>
<div class="bodystyle">
 <img src="image/02banner.jpg" />
 </div>
 
 <div class= "bottom">
 <li><a>欢迎您,${USER_SESSION.userName}</a></li>
					<li><a href="${pageContext.request.contextPath }/logout">安全退出</a></li>
					</div>

   
     <!-- 
     <div class="leftbox">
    <img src="image/311.jpg"/>
    </div>
      -->
    
     
    
        <div class="move">
                <div class="banner-wrap">
                    <div class="banner-item">
                        <img src="image/2019112703.jpg" /><img src="image/20201012.jpg"/>
                    </div>
            </div>
       
    <div class="guide"  style="border: 1">
        <div class="lgh"><a>计科2004 李国豪</a></div>
        <ul>
            <li>
                <div class="p1">
                <p>
                 <a href="/CustomerJava/selectdisplay">用户信息的查找、操作</a>
                 </p>
                </div>
            </li>
            <li>
                <div class="p2">
                <p>
                <a href="/CustomerJava/zengjia">添加新的用户信息</a>
                 </p>
                </div>
            </li>
             <li>
                <div class="p3">
                <p>
                <a href="/CustomerJava/shujuzidian">数据字典的查找、操作</a>
                 </p>
                </div>
            </li>
            <li>
                <div class="p4">
                <p>
                <a href="/CustomerJava/basezengjia">添加新的数据字典</a>
                 </p>
                </div>
            </li>
        </ul>
<!--
 <div class="rightbox">
    <img src="image/DSC_2377dibanxiu.jpg"/>
    </div> 
    -->
    
  
</body>
</html>

